<template>
  <div class="dig">
    <x-header :left-options="{showBack: false}">{{ detail.name }}</x-header>
    <img src="../../../assets/navBar.png" alt="" width="10" class="navBtndig" @click="backBtndig">
    <div class="top-wrap">
      <img src="../../../../static/images/fp/f_bg.png" alt="" style="height: 160px;width: 100%;">
      <div class="digbanner">
        <div class="left">
          <div class="">{{ detail.titleRate }}</div>
          <div class="" style="font-size: 25px">{{rate }}</div>
        </div>
      </div>
      <div class="bannerSty">
        <span v-for="(label, index) in detail.content">{{ label }}</span>
      </div>
    </div>
    <div style="margin-top:40px;background: #fff;height: 120px;">
      <div class="investmentCurrency">
        <span>投资币种:</span>
        <span class="currency" @click="ethBtn()">ETH
          <img src="../../../assets/digIcon.png" alt="" width="20" class="imgIcon" v-if="ethType">
        </span>
        <span class="currency" @click="btcBtn">BTC
          <img src="../../../assets/digIcon.png" alt="" width="20" class="imgIcon" v-if="btcType">
        </span>
        <span class="currency" @click="bncnBtn">BNCN
          <img src="../../../assets/digIcon.png" alt="" width="20" class="imgIcon" v-if="bnanType">
        </span>
      </div>
      <div class="investmentMoney">
        <span style="display: inline-block;height: 30px;line-height: 30px">投资币额:</span>
        <input type="number" placeholder="请输入数量(最小投资币额为1)" class="investmentInput" v-model="investmentMoney">
      </div>
    </div>
    <ul class="transactionCont clearfix" style="border-top: 1px solid #f6f6f6;">
      <div class="fr" v-for="quotation in quotationList">
        <li>
          <div style="margin-left:10px;">
            <img :src="quotation.iconUrl" alt="" width="25" style="vertical-align: middle;">
            <span>{{quotation.currencyPair}}</span>
          </div>
        </li>
        <li>¥{{quotation.prices.cny}}</li>
        <li>
          <div style="margin-right:10px;">
            <span class="negative" v-if="quotation.change<0" style="color: #fff;border-radius: 5px">{{quotation.change}}%</span>
            <span class="positive" v-if="quotation.change>=0" style="color: #fff;border-radius: 5px">{{quotation.change}}%</span>
          </div>
        </li>
        <div style="clear:both "></div>
      </div>
    </ul>
    <div style="margin-top: -15px;">
      <group>
        <cell is-link :arrow-direction="show1 ? 'up' : 'down'" @click.native="show1 = !show1">
          <span slot="title" style="font-size: 14px">基金概况</span>
          <i slot="icon" class="tv-icon"></i>
        </cell>
        <template v-if="show1">
          <div class="showbox show1" style="text-indent: 0em;font-size: 14px;">
            <p>数字货币基金主要是以数字货币进行投资，增值收益是数字货币的数量变动，而非传统意义上的返还法币。投资人可将闲置的数字货币进行无风险的套利交易投资，在持有数字货币的过程中，使持有的数字货币也能产生增值。</p>
            <p style="margin-top:15px;">比特币对冲套利:数字货币跨境板砖套利是指一种或多种数字资产的跨平台套利交易。A平台、B平台存入一定量的BTC/ETH已经其他数字货币，当A平台与B平台出现汇差时，程序会在小于一秒内，自动获取买一、卖一价、汇率以及手续费，并同时在A和B平台平台操作，不存在时间差，规避了传统板砖的操作。</p>
            <p style="margin-top:15px;">目前数字货币基金主要投资于币币交易的程序化套利，支持对冲套利交易、板砖套利交易和三角套利，提供资金利用率，支持超过50个交易对的大规模套利交易</p>
          </div>
        </template>
        <cell is-link :arrow-direction="show2 ? 'up' : 'down'" @click.native="show2 = !show2">
          <span slot="title" style="font-size: 14px">产品参数</span>
          <i slot="icon" class="book-icon"></i>
        </cell>
        <template v-if="show2">
          <ul style="font-size: 14px;">
            <li class="otcList">
              <div>
                <span>封闭期</span>
                <span class="fa r15">{{detail.week.replace('天', '')}}天</span>
              </div>
            </li>
            <li class="otcList">
              <div>
                <span>起投条件</span>
                <span class="fa r15">{{detail.join}}</span>
              </div>
            </li>
            <li class="otcList">
              <div>
                <span>预期年华收益率</span>
                <span class="fa r15">{{detail.rate}}</span>
              </div>
            </li>
          </ul>
        </template>
        <cell is-link :arrow-direction="show3 ? 'up' : 'down'" @click.native="show3 = !show3">
          <span slot="title" style="font-size: 14px">风控保障</span>
          <i slot="icon" class="unbrella-icon"></i>
        </cell>
        <template v-if="show3">
          <div class="showbox show2 show2-ai" style="font-size: 14px;">
            <div class="item">
              <div class="title">
                <span>构建场外交易渠道</span>
              </div>
              <div class="content">
                我们拥有众多的可信场外交易渠道
              </div>
            </div>
            <div class="item">
              <div class="title">
                <span>专业交易员操作</span>
              </div>
              <div class="content">
                我们有专业的数字货币交易员,展开场外交易
              </div>
            </div>
            <div class="item">
              <div class="title">
                <span>筛选优质交易平台</span>
              </div>
              <div class="content">
                我们只筛选风控可靠,实力雄厚的交易所进行交易
              </div>
            </div>
            <div class="item">
              <div class="title">
                <span>程序化统计套利</span>
              </div>
              <div class="content">
                我们选择最优网关传输,程序会在几乎小于1秒的时间内完成交易
              </div>
            </div>
            <div class="item">
              <div class="title">
                <span>Https加密传输</span>
              </div>
              <div class="content">
                我们采用国际公认的SSL数字证书,HTTPS加密协议进行数据传输
              </div>
            </div>
          </div>
        </template>
      </group>
    </div>

    <div class="bot-btn-wrap"></div>
    <div class="investment" @click="buy()">立即投资</div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import { XHeader, VChart, VLine, VTooltip, VScale, Cell, Group } from 'vux'
  import moment from 'dayjs'
  import { aiRate, detail } from '../../../service/product'
  import tips from '../../../service/tips.js'
  import axios from 'axios'
  export default {
    components: {
      XHeader,
      VChart,
      VLine,
      VTooltip,
      VScale,
      Cell,
      Group
    },
    data() {
      return {
        show1: true,
        show2: true,
        show3: true,
        chartData: [],
        detail: {},
        pid: "",
        rate: "",
        week: "",
        investmentMoney: "",
        ethType: false,
        btcType: false,
        bnanType: false,
        type: "",
        quotationList: [],//行情
      }
    },
    async created() {
      await this.getDetail(this.$route.query.pid)
      await this.getAiRate()
    },
    mounted() {
      this.pid = this.$route.query.pid;
      this.rate = this.$route.query.rate;
      this.getQuotation();
    },
    methods: {
      backBtndig() {
        history.back();
      },
      //获取行情
      getQuotation() {
        axios.get("http://47.52.241.237:8088/marketData/btc_eth").then((res) => {
          if (res.status == 200) {
            this.quotationList = res.data.data;
          }
        })
      },
      ethBtn() {
        this.ethType = true;
        this.btcType = false;
        this.bnanType = false;
        this.type = 'eth';
      },
      btcBtn() {
        this.ethType = false;
        this.btcType = true;
        this.bnanType = false;
        this.type = 'btc';
      },
      bncnBtn() {
        this.ethType = false;
        this.btcType = false;
        this.bnanType = true;
        this.type = 'bncn';
      },
      buy() {
        if (!(this.ethType || this.btcType || this.bnanType)) {
          tips.tips("请选择投资币种");
          return false;
        }
        if (!this.investmentMoney) {
          tips.tips("请输入投资币额");
          return false;
        }
        this.$router.push({ path: '/paycoin', query: { pid: this.pid, rate: this.rate, type: this.type, money: this.investmentMoney } })
      },
      async getDetail(pid) {
        const res = await detail(pid)
        if (res.status === 200) {
          this.detail = res.body;
          this.detail.content.push(res.body.week ? res.body.week + "期限" : "")
        }
      },
      async getAiRate() {
        const res = await aiRate()
        if (res.status === 200) {
          for (let obj of res.rate) {
            this.chartData.push({
              date: moment(obj.key.replace('1700', '')).format('YYYY-MM-DD'),
              value: obj.price
            })
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../../static/styles/fp-detail";
  body {
    background: #f6f6f6;
  }

  .dig .bt {
    border-bottom: 1px solid #f6f6f6;
  }

  .dig .fr {
    position: relative;
  }

  .dig .fa {
    position: absolute;
  }

  .dig .mgt {
    margin-left: 10px;
  }

  .dig .c4 {
    color: #444;
  }

  .dig .c7 {
    color: #777;
  }

  .dig .r15 {
    right: 15px;
    color: #fea620;
  }

  .dig .investment {
    height: 40px;
    line-height: 40px;
    margin: auto;
    background-image: linear-gradient(-135deg, #FEDF33 0%, #FE9D09 100%);
    color: #fff;
    text-align: center;
    width: 100%;
    /* border-radius: 25px; */
    position: fixed;
    bottom: 0px;
    margin-top: -60px;
  }

  .dig .vux-header {
    position: relative;
    padding: 3px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #f76c25;
  }

  .dig .icoTop {
    position: absolute;
    top: 0px;
  }

  .dig .vux-header .vux-header-left .left-arrow:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid #fff;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    top: 8px;
    left: 7px;
  }

  .dig .icoType {
    height: 40px;
    line-height: 40px;
    background: #fff;
    margin-top: 10px;
    color: #999;
    span {
      margin-left: 15px;
      display: inline-block;
    }
    .active {
      color: #fea620;
      border-bottom: 1px solid #fea620;
    }
  }

  .dig .rateNum {
    position: absolute;
    right: 95px;
    top: 10px;
    text-align: right;
  }

  .dig .positiveRate {
    display: inline-block;
    width: 70px;
    line-height: 24px;
    text-align: center;
    background: #ff1010;
    color: #fff;
    border-radius: 5px;
    position: absolute;
    right: 15px;
    top: 24px;
  }

  .dig .negativeRate {
    display: inline-block;
    width: 70px;
    line-height: 24px;
    text-align: center;
    background: #7ed321;
    color: #fff;
    border-radius: 5px;
    position: absolute;
    right: 15px;
    top: 24px;
  }

  .dig .otcList {
    border-bottom: 1px solid #f6f6f6;
    height: 40px;
    line-height: 40px;
    padding: 0px 15px;
    color: #999;
    position: relative;
  }

  .dig .otcList:nth-child(2n) {
    background: #f6f6f6;
  }

  .dig .investmentCurrency {
    padding-left: 15px;
    color: #333;
    padding-top: 20px;
    .currency {
      width: 72px;
      height: 20px;
      line-height:20px;
      border: 1px solid #fea620;
      display: inline-block;
      border-radius: 5px;
      text-align: center;
      color: #fea620;
      position: relative;
    }
  }

  .dig .investmentMoney {
    padding-left: 15px;
    margin-top: 20px;
  }

  .dig .investmentInput {
    border: none;
    border-bottom: 1px solid #666;
    outline: none;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    width: 50%;
  }

  .dig .imgIcon {
    position: absolute;
    top: 5px;
    right: 0px;
  }

  .dig .transactionCont {
    background: #fff;
    text-align: center;
  }

  .dig .transactionCont li {
    color: #333;
    float: left;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f6f6f6;
    list-style: none;
    width: 33.33%;
  }

  .dig .transactionCont li:first-child {
    text-align: left;
  }

  .dig .transactionCont li:nth-child(3n) {
    text-align: right;
  }

  .dig .negative {
    color: #fff !important;
    width: 65px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background: #ff1010;
    display: inline-block;
  }

  .dig .positive {
    color: #fff !important;
    width: 65px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background: #7ed321;
    display: inline-block;
  }

  .dig .bannerSty {
    text-align: center;
    margin-top: 20px;
  }

  .dig .bannerSty span {
    color: #fff;
    border-radius: 15px;
    border: 1px solid #fff;
    padding: 0px 8px;
    margin-right: 5px;
  }

  .dig .digbanner {
    color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: -150px;
  }
  .navBtndig {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 888;
    transform: rotate(180deg);
  }
</style>